<template>
  <swiper :options='swiperOption' class="banner">
        <swiper-slide  class="cd">
            <div class="cd-warpper" ref="cdWarpper">
                <img :src="currentSong.picUrl" alt="">
            </div>
            <p>{{getFirstLyric()}}</p>
            <p class="comments" @click="selectComments">☁</p>
        </swiper-slide>
        <swiper-slide  class="lyric" ref="lyric">
            <ScrollView ref="scrollView">
                <ul>
                    <li v-for="(value,index) in currentLyric" :key="index" :class="{'active':currentLineNum===index}" v-show="value">{{value}}</li>
                </ul>
            </ScrollView>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import ScrollView from '../ScrollView.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'PlayerMiddle',
  components: {
    swiper,
    swiperSlide,
    ScrollView
  },
  data () {
    return {
      swiperOption: {
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          bulletClass: 'my-bullet', // 需设置.my-bullet样式
          bulletActiveClass: 'my-bullet-active'
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
      },
      currentLineNum: '0',
      lineNums: 0,
      currentTimeFlag: false
    }
  },
  props: {
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  },
  computed: {
    ...mapGetters([
      'isPlaying',
      'currentSong',
      'currentLyric'
    ])
  },
  watch: {
    isPlaying (newValue, oldValue) {
      this.currentTimeFlagT()
      newValue ? this.$refs.cdWarpper.classList.add('active') : this.$refs.cdWarpper.classList.remove('active')
    },
    currentTime (newValue, oldValue) {
      // 高亮歌词同步
      const lineNum = Math.floor(newValue)
      this.currentLineNum = this.getActiveLineNum(lineNum)
      // 歌词滚动同步
      if (this.currentTimeFlag) {
        const currentLyricTop = document.querySelector('li.active').offsetTop
        const lyricHeight = this.$refs.lyric.$el.offsetHeight
        this.$refs.scrollView.scrollTo(0, lyricHeight / 2 - currentLyricTop, 150)
      }
    },
    currentLyric (newValue, oldValue) {
      this.currentTimeFlag = false
      // 解决完全没有歌词导致的报错
      // if (!this.currentLyric[0]) {
      //   this.currentLyric[0] = '暂无歌词'
      // }
      for (const key in newValue) {
        this.currentLineNum = key
        return
      }
    }
  },
  methods: {
    ...mapActions([
      'setIsCommentsList'
    ]),
    currentTimeFlagT () {
      setTimeout(() => {
        this.currentTimeFlag = true
      }, 500)
    },
    getFirstLyric () {
      for (const key in this.currentLyric) {
        return this.currentLyric[key]
      }
    },
    getActiveLineNum (lineNum) {
      if (lineNum < 0) {
        this.lineNums++
        lineNum = this.lineNums
      }
      const result = this.currentLyric[lineNum]
      if (result === undefined || result === '') {
        lineNum--
        return this.getActiveLineNum(lineNum)
      } else {
        this.lineNums = 0
        return lineNum + ''
      }
    },
    selectComments (id) {
      this.setIsCommentsList(true)
      this.$bus.$emit('detailImg')
      this.$bus.$emit('PlayerHeaderImg', this.currentSong.picUrl)
    }

  },
  mounted () {
    this.$bus.$on('currentTimeFlag', () => {
      this.currentTimeFlagT()
    })
  }
}
</script>

<style scoped lang='scss'>
@import "../../assets/css/mixin";
@import "../../assets/css/variable";
.comments{
      font-size: 60px !important;
      color: #fff !important;
    }
.banner{
    position: fixed;
    top: 150px;
    bottom: 250px;
    left: 0;
    right: 0;

    .cd{
     .cd-warpper{
        width: 600px;
        height: 600px;
        border-radius: 50%;
        border: 70px solid #000;
        box-sizing: border-box;
        display: block;
        margin: 0 auto;
        overflow: hidden;
        animation: sport 30s linear infinite;
        animation-play-state:paused;
        &.active{
              animation-play-state: running;
            }
        img{
            width: 100%;
            height: 100%;
        }
      }
      p{
          margin-top: 50px;
          text-align: center;
          @include font_size($font_medium);
          @include font_color();
      }
    }
    .lyric{
      ul{
        padding-top: 55.6%;
        padding-bottom: 55.6%;
      }
        li{
            text-align: center;
            @include font_size($font_medium);
            // @include font_color();
            color:#fff;
            opacity: 0.4;
            margin: 50px 0;
            &:last-of-type{
                padding-bottom: 100px;
            }
            &.active{
              opacity: 1;
            }
        }
    }
}
@keyframes sport{
  from{
    transform: rotate(0deg)
  }
  to{
    transform: rotate(360deg)
  }
}
</style>
<style lang='scss'>
@import "../../assets/css/mixin";
.my-bullet{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 20px;
}
.my-bullet-active{
    width: 50px;
@include bg_color();
}
</style>
